<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.dateTimeRange"
        size="small"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="filter-item"
        :editable="false"
      />
      <!-- <el-select v-model="listQuery.level" size="small" placeholder="选择日志级别" clearable class="filter-item">
        <el-option label="DEBUG" :value="'DEBUG'" />
        <el-option label="INFO" :value="'INFO'" />
        <el-option label="WARNING" :value="'WARNING'" />
        <el-option label="ERROR" :value="'ERROR'" />
      </el-select>
      <el-select v-model="listQuery.method" size="small" placeholder="选择请求方法" clearable class="filter-item">
        <el-option label="GET" :value="'GET'" />
        <el-option label="POST" :value="'POST'" />
        <el-option label="PUT" :value="'PUT'" />
        <el-option label="PATCH" :value="'PATCH'" />
        <el-option label="DELETE" :value="'DELETE'" />
      </el-select> -->
      <el-input v-model="listQuery.keyWord" size="small" placeholder="请输入关键词" clearable class="filter-item w-200" />
      <!-- <el-button-group class="filter-item"> -->
      <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button size="small" icon="el-icon-refresh" @click="refresh">重置</el-button>
      <!-- </el-button-group> -->
    </div>

    <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" border fit height="630px" class="table-container" highlight-current-row>
      <el-table-column fixed label="序号" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行为描述">
        <template slot-scope="scope">
          {{ scope.row.operate }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="日志级别" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.level | levelFilter">{{ scope.row.level }}</el-tag>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="请求方法" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.method }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="响应时间" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.time }} ms</template>
      </el-table-column> -->
      <el-table-column label="IP地址" width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.ip }}
        </template>
      </el-table-column>
      <el-table-column label="操作人" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作时间" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      style="margin-top: 20px"
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import { getUserLog } from '@/http/api/myHttp.js'

export default {
  components: {},
  filters: {
    levelFilter(level) {
      const levelMap = {
        DEBUG: 'success',
        INFO: '',
        WARNING: 'warning',
        ERROR: 'danger'
      }
      return levelMap[level]
    }
  },
  data() {
    return {
      total: 0,
      formData: {},
      tableData: [],
      //listLoading: true,
      listLoading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        dateTimeRange: undefined,
        status: undefined,
        level: undefined,
        method: undefined,
        keyWord: undefined
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    search() {
      this.fetchData()
    },
    refresh() {
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
        dateTimeRange: undefined,
        status: undefined,
        level: undefined,
        method: undefined,
        keyWord: undefined
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      let startTime = ''
      let endTime = ''
      if(this.listQuery?.dateTimeRange){
        startTime = this.listQuery?.dateTimeRange[0]
        endTime = this.listQuery?.dateTimeRange[1]
      }
      getUserLog({ ...this.listQuery, startTime, endTime }).then((res) => {
        this.listLoading = false
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 18px 24px;
}
.filter-container {
  display: flex;
  justify-content: flex-start;
}

.filter-item {
  width: 300px;
  margin-right: 10px;
}

.el-table {
  ::v-deep {
    margin-top: 20px;
    .el-table__header {
      border-radius: 6px;
      overflow: hidden;
    }

    .el-table__cell {
      height: 50px;
      padding: 0;
    }

    .is-leaf {
      background-image: linear-gradient(to top, rgba(128, 191, 255, 1), rgba(51, 153, 255, 1));
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 24px;
      color: rgba(255, 255, 255, 1);
      border-right: 1px solid white;
    }
  }
}

.operate_area {
  width: 80px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  img {
    cursor: pointer;
  }
}
</style>
